<template>
    <div class="back_contain_n">
        <!-- 头部搜索 -->
        <div class="Search_Top_Part">
            <div class="search_list" >
                <div>
                    <div class="input_flex daterange">
                        <el-date-picker v-model="query.searchInput4" type="daterange"
										range-separator="-"
										start-placeholder="开始日期"
										end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>
            </div>
            <div class="search_bt">
                <span class="zll-search" @click="getList">搜索</span>
                <span class="zll-search-reset" @click="searchReset()">重置</span>
            </div>
        </div>
        <div class="Search_Top_Part">
            <div class="search_list" >
                <div class="tongji">
                    <div class="input_flex">
                        <span class="search_left">查询时段：</span>
                        <span>2023-01-01  至  2023-02-11</span>
                    </div>
                    <div class="input_flex">
                        <span class="search_left">查询人：</span>
                        <span>胡海滨</span>
                    </div>
                    <div class="input_flex">
                        <span class="search_left">查询日期：</span>
                        <span>2023-12-12 13:11:11</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- table -->
        <el-row :gutter="40">
            <el-col :span="10">
                <p class="_center">按班次</p>
                <sys-table
                    :tableData="tableData" 
                    :tableLoading="tableLoading" 
                    :tableHeader="tableHeader" :isOperate="false"
                ></sys-table> 
            </el-col>
            <el-col :span="14">
                <p class="_center">按工序</p>
                <sys-table
                    :tableData="tableData2" 
                    :tableLoading="tableLoading2" 
                    :tableHeader="tableHeader2" :isOperate="false"
                ></sys-table> 
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data(){
        return {
            addDialog: false,
            editData: {},
            type: '',		
            tableLoading:true, //table刷新
            tableLoading2:true, //table刷新
            query: {
                searchInput4: '',
            },
            tableData: [{},{}],
            tableHeader:[],
            tableData2: [{},{}],
            tableHeader2:[],
        }
    },
    methods: {
        edit(val,type) {
            this.addDialog = true
            this.type = type
            this.editData = val
        },
        getList(){//获取表格数据
            this.tableLoading = true;
            setTimeout(()=>{													
                this.tableHeader =  [																																					
                        {"columnValue": "tableNum1", "columnName": "废料类型　" },
                        {"columnValue": "tableNum3", "columnName": "白班" },
                        {"columnValue": "tableNum4", "columnName": "夜班" },
                        {"columnValue": "tableNum5", "columnName": "合计" },
                        {"columnValue": "tableNum6", "columnName": "单类占比"},
                    ]
                this.tableData = JSON.parse(JSON.stringify(this.tableData))
                this.tableLoading = false;
            },500)
        },
        getList2(){//获取表格数据
            this.tableLoading2 = true;
            setTimeout(()=>{																			
                this.tableHeader2 =  [																																					
                        {"columnValue": "tableNum1", "columnName": "废料类型　" },
                        {"columnValue": "tableNum3", "columnName": "配拌投料" },
                        {"columnValue": "tableNum4", "columnName": "挤塑直切" },
                        {"columnValue": "tableNum5", "columnName": "U管成型" },
                        {"columnValue": "tableNum6", "columnName": "仓储"},
                        {"columnValue": "tableNum7", "columnName": "合计"},
                        {"columnValue": "tableNum8", "columnName": "单类占比"},
                    ]
                this.tableData2 = JSON.parse(JSON.stringify(this.tableData2))
                this.tableLoading2 = false;
            },500)
        },
        searchReset() { //重置搜索
            this.query = {
                searchInput4: ''
            };
            this.getList();
            this.getList2();
        },
    },
    mounted(){
        let self = this;
        self.getList()
        self.getList2()
       
    },
}
</script>

<style lang="scss" scoped>
@import "@/style/SearchTop.scss";
.tongji {
    .input_flex {
        width: auto !important;
        span {
            height: 26px;
            line-height: 26px;
        }
    }
}
._center {
    text-align: center;
    line-height: 40px;
}
</style>